<template>
  <div class="list">
    <div class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-table
      ref="singleTable"
      :data="userslist"
      highlight-current-row
      style="width: 800px; margin-left: 30px"
    >
      <el-table-column
        type="index"
        :label="titlearr[0]"
        width="50"
      >
      </el-table-column>
      <el-table-column
        property="registe_time"
        :label="titlearr[1]"
        width="300"
      >
      </el-table-column>
      <el-table-column
        property="username"
        :label="titlearr[2]"
        width="300"
      >
      </el-table-column>
      <el-table-column
        property="city"
        :label="titlearr[3]"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="userscount"
      @current-change="handleCurrentChange"
      ref="pagination"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: ['titlearr', 'userslist', 'getuserslist','userscount','title'],
  data() {
    return {
      tableData: [],
      currentRow: null,
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.getuserslist(val)
    },
  },
  mounted() {
    console.log(this.userslist);
  },
};
</script>
<style lang="scss" scoped>
.list {
  .header {
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
    .el-breadcrumb {
      margin-top: 15px;
      padding-left: 10px;
    }
  }
  .el-pagination {
    margin-top: 20px;
    padding-left: 300px;
  }
}
</style>
